var SearchForm = function () {
  var template = /* html */ `
    <div class="search-form">
      <sys-common-search ref="commonSearch" request-url="materialSelectFilter/getMaterialSelectData" :request-data="{type:32}" :search="search"
        :search-field="searchField" label-width="auto" input-width="180px" :response-filter-fun="responseFilterFun" :dropdown-props="dropdownProps"
        :select-dropdown-option-config="selectDropdownOptionConfig">
        <template slot="prepend">
          <el-form-item label="预收付款日期">
            <el-date-picker clearable v-model="search.payDayStart" value-format="timestamp" :editable="false" style="width:155px"
              :picker-options="payDayStartOption">
            </el-date-picker>
            <span>-</span>
            <el-date-picker clearable v-model="search.payDayEnd" value-format="timestamp" :editable="false" style="width:155px"
              :picker-options="payDayEndOption">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="制单日期">
            <el-date-picker clearable v-model="search.startDate" value-format="timestamp" :editable="false" style="width:155px"
              :picker-options="startDateOption">
            </el-date-picker>
            <span>-</span>
            <el-date-picker clearable v-model="search.endDate" value-format="timestamp" :editable="false" style="width:156px"
              :picker-options="endDateOption">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="收付款类型">
            <el-select clearable v-model="search.type" style="width:180px">
              <el-option v-for="item in typeList" :key="item.value" :value="item.value" :label="item.label">
              </el-option>
            </el-select>
          </el-form-item>
        </template>
        <template slot="append">
          <el-form-item label="状态">
            <el-select clearable v-model="search.status" style="width:180px">
              <el-option v-for="item in statusList" :key="item.value" :value="item.value" :label="item.label">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否使用">
            <el-select clearable v-model="search.isUsed" style="width:180px">
              <el-option v-for="item in isUsedList" :key="item.value" :value="item.value" :label="item.label">
              </el-option>
            </el-select>
          </el-form-item>
        </template>
      </sys-common-search>
    </div>
  `;

  return {
    mixins: [
      datePickerOptionsMixin('startDate', 'endDate'),
      datePickerOptionsMixin('payDayStart', 'payDayEnd', 'payDayStartOption', 'payDayEndOption')
    ],

    props: {
      search: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        typeList: i18n.getDropDown('warehouseBalance.detail.type', [1, 2]),
        statusList: i18n.getDropDown('financeMgr.advancePayment.status', [0, 1, 2]),
        isUsedList: i18n.getDropDown('financeMgr.advancePayment.isUsed', [0, 1]),
        searchField: ['receviePaymentUserName', 'source', 'sourceStr', 'advanceNo', 'relationBank', 'bank'],
        dropdownProps: {
          receviePaymentUserName: '收付款方',
          source: "用途",
          sourceStr: "用途描述",
          advanceNo: "合同编号",
          relationBank: "银行卡号",
          bank: "所属银行"
        },
        selectDropdownOptionConfig: {
          receviePaymentUserName: {
            valueField: "receviePaymentUserName",
            labelField: "receviePaymentUserName"
          },
          source: {
            valueField: "source",
            labelField: "sourceText"
          },
          sourceStr: {
            valueField: "sourceStr",
            labelField: "sourceStr"
          },
          advanceNo: {
            valueField: "advanceNo",
            labelField: "advanceNo"
          },
          relationBank: {
            valueField: "relationBank",
            labelField: "relationBank"
          },
          bank: {
            valueField: "bank",
            labelField: "bank"
          }
        }
      };
    },

    methods: {
      responseFilterFun: function (dropdownData) {
        for (var i = 0; i < dropdownData.length; i++) {
          var obj = dropdownData[i];
          var source = obj.source;
          obj.sourceText = i18n.getMsg(`financeMgr.advancePayment.source.${source}`);
        }
        return dropdownData;
      },

      resetDropdownData:function(){
        this.$refs['commonSearch'].resetDropdownData();
      }
    },

    components: {
      SysCommonSearch: SysCommonSearch
    },

    template: template
  };
}();
